<!DOCTYPE html>
<!--suppress ALL-->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>导航页</title>
    <base th:href="@{/}"><!-- 不用base就使用th:src="@{/js/jquery.min.js} -->
    <!-- Bootstrap -->
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <script src="/js/jquery.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <style type="text/css">
        .carousel {
            height: 200px;
            background-color: #000;
        }

        .carousel .item {
            height: 200px;
            background-color: #000;
        }

        .carousel img {
            width: 100%;
        }

        #content {
            border: 1px solid red;
            width: 80px;
            height: 40px;
            float: right;
            margin-right: 10%;
        }
    </style>
</head>
<body>
<div class="container-fruid">
    <div class="navbar navbar-default navbar-fixed-top" role="navigation"
         style="padding-left: 30px;">
        <div class="navbar-header">
            <span class="navbar-brand">欢迎光临&nbsp;&nbsp;&nbsp;电子商务平台</span>
        </div>
        <ul class="nav navbar-nav">
            <li><a>注册</a></li>
            <li>
                <a th:href="${session.loginUser==null}?'user/toLogin':'#'">
						<span th:if="${session.loginUser==null}">
							登录
						</span>
                    <span th:if="${session.loginUser!=null}">
							欢迎<span th:text="${session.loginUser.getEmail()}"></span>
						</span>
                </a>
            </li>
            <li><a>后台</a></li>
            <li>
                <div id="city" style="border: 1px solid red;height: 25px;width: 80px;">城市</div>
                <div id="weather" style="border: 1px solid red;height: 25px;width: 80px;">天气</div>
            </li>
        </ul>


        <ul class="nav navbar-nav navbar-right" style="padding-right: 30px;">
            <li class="dropdown"><a href="##" data-toggle="dropdown"
                                    class="dropdown-toggle">信息设置<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="user/userInfo" th:href="@{/user/toUserInfo}">修改密码</a></li>
                    <li><a href="user/userInfoUpdate" th:href="@{/user/toUserInfoUpdate}">修改个人信息</a></li>
                    <li><a href="user/showInfoFrom" th:href="@{/user/showInfoFrom}">个人信息</a></li>
                    <li><a href="address/toAddressPage" th:href="@{/address/toAddressPage}">收获地址</a></li>
                </ul>
            </li>
            <li><a href="cart/cartList">我的购物车</a></li>
            <li><a href="cart/myFocus">我的收藏</a></li>
            <li><a href="cart/myOder">我的订单</a></li>
            <li class="dropdown"><a href="##" data-toggle="dropdown"
                                    class="dropdown-toggle">关于我们<span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="##">联系我们</a></li>
                    <li><a href="##">投诉建议</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <!-- ************************************************** -->
    <div id="carousel-example-generic" class="carousel slide"
         data-ride="carousel" style="margin-top: 20px;">
        <!-- Indicators 小圆圈-->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic"
                th:each="advertise,adstat:${advertisementGoods}"
                th:data-slide-to="${adstat.index}"
                th:class="(${adstat.index}==0)? 'active' : ''"></li>
        </ol>
        <!-- 滚动广告图片 -->
        <div class="carousel-inner" role="listbox">
            <div th:each="advertise,adstat:${advertisementGoods}"
                 th:class="(${adstat.index}==0)? 'item active' : 'item'">
                <img th:src="'images/' + ${advertise.gpicture}" th:alt="${adstat.index + 1}">
                <div class="carousel-caption"><span th:text="${advertise.gname}"></span></div>
            </div>
        </div>
        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic"
           role="button" data-slide="prev"> <span
                class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a> <a class="right carousel-control" href="#carousel-example-generic"
                role="button" data-slide="next"> <span
            class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
    </div>
    <!-- *************************************** -->
    <div class="navbar navbar-default " role="navigation">
        <ul class="nav navbar-nav" style="padding-left: 50px;">
            <li><a th:href="@{/}">首页</a></li>
            <li th:each="gty:${goodTypes}"><a th:href="@{/findGoodsByTypeId(typeId=${gty.id})}"><span
                    th:text="${gty.typename}"></span></a>
            </li>
        </ul>
        <form action="search" class="navbar-form navbar-right"
              style="padding-right: 50px;">
            <div class="form-group">
                <input type="text" class="form-control" name="mykey" placeholder="请输入关键词"/>
            </div>
            <button type="submit" class="btn btn-default">搜索</button>
        </form>
    </div>
</div>
</body>

<script>
    $(function () {
        $.getJSON("/getCityById", function (data) {
            if (data.state == 200) {
                $("#city").html("当前城市:" + data.data.result.Province + "-" + data.data.result.City);
                var city = data.data.result.City;
                $.getJSON("/getWeather", {"city": city}, function (data) {
                    var weatherInfo = dara.dara.result.future;
                    var time = data.message;
                    for (var i = 0; i < weatherInfo; i++) {
                        if (weatherInfo[i].date == time) {
                            $("#weather").html(weatherInfo[i].date + ":" + "温度:" +
                                weatherInfo[i].temperature + " 天气:" + weatherInfo[i].weather)
                        }
                    }
                });
            }
        });
    });
</script>
</html>
